<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit"/>
	<meta name="force-rendering" content="webkit"/>

	<title></title>
	<link type="text/css" rel="stylesheet" href="${base}/templates/${config.theme}/mobile/css/style.css" />
	<script src="${base}/templates/${config.theme}/mobile/js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			//选择尺寸
			$('.sizetype').click(function(){
				$("#size").animate({bottom:"0"},500);
				$('.f_mask0').show();
				$("body").css({'height':'100%','overflow':'hidden'});
			})
			$('.size3 a').click(function(){
				$('.f_mask0').hide();
				$('#size').animate({bottom:"-80%"},500);
				$("body").css({'height':'auto','overflow':''});
			})

			$('.size1_3 img').click(function(){
				$('.f_mask0').hide();
				$('#size').animate({bottom:"-80%"},500);
				$("body").css({'height':'auto','overflow':''});
			})

			//
		})
	</script>
	<script type="text/javascript">
		//选项卡
		function setTab(name,cursel,n){
			for(i=1;i<=n;i++){
				var menu=document.getElementById(name+i);
				var con=document.getElementById("con_"+name+"_"+i);
				menu.className=i==cursel?"hover":"";
				con.style.display=i==cursel?"block":"none";
			}
		}
	</script>
</head>

<body>
<div class="headerbox">
	<div class="header">
		<div class="headerL">
			<a onclick="javascript:history.back(-1)" class="goback"><img src="${base}/templates/${config.theme}/mobile/images/goback.png" /></a>
		</div>
		<div class="headerC">
			<p>交易详情</p>
		</div>
		<div class="headerR"></div>
	</div>
</div>
<div class="hbox"></div>
<a name="m1">
	<div class="xqbox1">
		<img src="${product.image}" width="100%"/>
		<div class="tit">
			<div style="width: 4rem;
    align-items: center;
    display: flex;
    font-weight: normal;
    float: right;">
				<img src="${base}/templates/${config.theme}/mobile/images/fenxiang.png" style="width: 1rem" />
				分享
			</div>
			<div style="padding-right: 1rem;    height: 2rem;
    overflow: hidden;">
				${product.name}
			</div>
		</div>
		<div class="miaoshu">
			<span>手剥现摘</span>
		</div>
		<div class="qita">
			<p class="p1">￥${product.price}</p>
			<!-- <p class="p2">全国包邮   |   销量488</p> -->
		</div>
	</div>
</a>

<div class="clear"></div>
<div class="kbox"></div>

<div class="clear"></div>
<div class="xqtab">
	<div class="Menubox">
		<ul>
			<li class="hover" onclick="setTab('two',1,2)" id="two1">图文详情</li>
			<li class="" onclick="setTab('two',2,2)" id="two2">产品参数</li>
		</ul>
	</div>
	<div class="Contentbox">
		<div id="con_two_1">
			<div class="xqsub">
				${product.introduction}
			</div>
		</div>
		<div style="display:none" id="con_two_2">
			<div class="canshu">
				<div class="canshu_1">
					<p class="pl">产地</p>
					<p class="pr">${product.production}</p>
				</div>
			</div>
			<div class="canshu">
				<div class="canshu_1">
					<p class="pl">特点</p>
					<p class="pr">${product.memo}</p>
				</div>
			</div>
			<div class="canshu">
				<div class="canshu_1">
					<p class="pl">规格</p>
					<p class="pr">${product.specifications}</p>
				</div>
			</div>

		</div>

	</div>
</div>
</div>
<div class="clear"></div>
<div class="xqbotbox">
	<div class="xqbotbox0">
		<div class="xqbotboxL">
			<ul>
				<li>
					<a href="${base}/">
						<img src="${base}/templates/${config.theme}/mobile/images/f01.png" />
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="javascript:void(0)">
						<img src="${base}/templates/${config.theme}/mobile/images/xqf1.png" />
						<p>客服</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="xqbotboxR">
			<a class="a2 sizetype">立即购买</a>
			<a class="a1 sizetype">加入购物车</a>
		</div>
	</div>
</div>
<div class="xzsize">
	<div class="xzsize0">
		<div class="f_mask0"></div>
		<div id="size">
			<div class="size1">
				<div class="size1_1">
					<img src="${base}/templates/${config.theme}/mobile/images/gwc1.png" />
				</div>
				<div class="size1_2">
					<p class="p1">￥489.00</p>
					<p class="p2">商品编号：9790909709</p>
					<p class="p3">库存13540件</p>
				</div>
				<div class="size1_3">
					<img src="${base}/templates/${config.theme}/mobile/images/close.png" />
				</div>
			</div>
			<div class="size2">
				<div class="size2_1">
					<p class="tit">颜色</p>
					<a href="javascript:void(0)" class="on">白色</a>
				</div>
				<div class="size2_1">
					<p class="tit">尺码</p>
					<a href="javascript:void(0)">X</a>
					<a href="javascript:void(0)">L</a>
					<a href="javascript:void(0)">XL</a>
					<a href="javascript:void(0)">XXL</a>
					<a href="javascript:void(0)">量身定做</a>
				</div>
				<div class="size2_1">
					<p class="tit">数量</p>
					<div class="lnums">
						<div class="num1">-</div>
						<div class="num2">1</div>
						<div class="num3">+</div>
					</div>
				</div>
			</div>
			<div class="size3">
				<div onClick="addProduct('${product.id}')">确定</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//更新购物车数量
	function updateQuantity(productId,quantity){
		$.ajax({
            url: "${base}/cart_item/update",
            type: "POST",
            data: {
            	"productId":productId,
            	"quantity":quantity,
            	"type":1
            },
            success: function(data){
                $('.f_mask0').hide();
				$('#size').animate({bottom:"-80%"},500);
				$("body").css({'height':'auto','overflow':''});
            }
        });

	}

	function addProduct(productId){
		$("#reduceProduct_"+productId).css("display","");
		updateQuantity(productId,1);
	}

</script>
</body>

</html>
